/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import style from './style.css';
import Video from '../../../components/video';

@connect(
  (state, props) => ({
    openVideo: state.openVideo,
  }), {}
)
export default class extends Component {

  render() {
    const { location, openVideo } = this.props;
    const { id, type } = location.query;
    const videoType = `video${type}`;
    const videoList = openVideo[videoType] || [];
    const current = videoList.filter(item => +item.id === +id)[0];
    return (
      <div className={style.container}>
        <div className={style.center}>
          <Video src={current.src} />
        </div>
      </div>
    );
  }
}